<template>
  <div class="updateUser">
    <!-- 标题 -->
    <van-nav-bar
      :title="title"
      @click-right="onClickRight"
      safe-area-inset-top
      @click-left="$router.back(-1);$router.isBack = true"
      fixed
      border
    >
      <template #left>
        <van-icon name="arrow-left" size="18" color="#000" />
      </template>
      <template #right>
        <van-icon name="success" color="#000" size="20" v-if="status" />
      </template>
    </van-nav-bar>

    <!-- 修改邮箱 -->
    <div class="text" v-if="type == 1" @click="input">
      <van-field
        v-model="data.mail"
        type="emil"
        label="邮箱"
        maxlength="6"
        border
        placeholder="请输入邮箱"
      />
      <van-field
        v-model="sms"
        v-if="!isshow"
        center
        clearable
        label="邮箱验证码"
        name="sms"
        :rules="[{ required: true }]"
        placeholder="请输入邮箱验证码"
      >
        <template #button>
          <div @click="smsBy">{{ text }}</div>
        </template>
      </van-field>
    </div>

    <!-- 修改密码 -->
    <div class="text" v-else @click="input">
      <van-field
        v-model="oldPassword"
        type="password"
        label="旧密码"
        maxlength="13"
        border
        placeholder="请输入旧密码"
      />
      <van-field
        v-model="password"
        type="password"
        label="新密码"
        maxlength="13"
        border
        placeholder="请输入新密码"
      />
      <van-field
        v-model="password1"
        type="password"
        label="重复密码"
        maxlength="13"
        border
        placeholder="请确认密码"
      />
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { updatePassword } from "@/api/userPassword";
import { verificationMail } from "@/api/auth";
export default {
  name: "updateUser",
  data() {
    return {
      status: false,
      title: "",
      type: 1,

      //修改邮箱-发送验证码
      text: "发送验证码",
      smsTime : 60,
      isSMS : false,

      //修改邮箱
      data: {
        mail: "",
        sms: "",
      },

      //修改密码
      password: "",
      password1: "",
      oldPassword: "",
    };
  },
  methods: {
    // 保存
    onClickRight() {
      let data = {};
      let msg = this.geshi();
      if (msg != "") {
        this.$Toast.fail(msg);
        return;
      }

      if (this.type == 1) {
        data = this.data;
      } else {
        data.password = this.password;
        data.oldPassword = this.oldPassword;
        this.upPassword(data);
      }
    },


    // 修改密码
    upPassword(data) {
        updatePassword(data).then((res) => {
            if (res.code == 200) {
                localStorage.removeItem("token");
                this.$Dialog({
                    title : '修改成功，请重新登录！'
                }).then(res => {
                    this.$router.push("/login");
                })
            }
        });
    },

    // 效验输入框格式
    geshi() {
      if (this.type == 1) {
        if (this.data.sms.length == 0) {
          return "验证码不能为空";
        } else {
          return "";
        }
      } else {
        if (this.password != this.password1) {
          return "密码不一致";
        } else if (this.password.length < 4) {
          return "密码必须大于4位数";
        } else {
          return "";
        }
      }
    },


    //发送验证码
    smsBy() {
        if (this.data.mail == "" || this.data.mail == undefined) {
            return this.$Toast.fail("请输入邮箱");
        }
        if (this.isSMS) {
            return this.$Toast(this.smsTime + "秒后重新发送");
        }
        this.isSMS = true;
            verificationMail({
            mail: this.data.mail,
            type: 'password',
        })
        .then((res) => {
            if (res.code != 200) {
                this.isSMS = false;
                this.smsTime = 60;
                this.text = "发送验证码";
                clearInterval(sics);
            }
        });
        var sics = setInterval(() => {
            if (this.smsTime <= 0) {
                this.isSMS = false;
                this.smsTime = 60;
                this.text = "发送验证码";
                clearInterval(sics);
            } else {
                this.smsTime--;
                this.text = this.smsTime + "秒后重新发送";
            }
        }, 1000);
        this.text = this.smsTime + "秒后重新发送";
    },


    // 验证手机号
    isPhone(phone) {
      var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      return !myreg.test(phone);
    },

    input(name) {
      this.status = true;
    },
  },
  created() {
    if (this.$route.query.type == 1) {
      this.type = 1;
      this.title = "修改邮箱";
    } else {
      this.type = 2;
      this.title = "修改密码";
    }
  },
};
</script>

<style scoped>
.updateUser {
}
.text {
  padding-top: 50px;
}
</style>
